<template>
  <div class="box">
    <div class="btop">
      <div class="b11">LOGO</div>
      <div class="bt1" @click="goOptions">
        <img
          class="bt1-img"
          :src="
            getUserInfo.chain == 'eth'
              ? require('../assets/images/logo1.png')
              : require('../assets/images/logo2.png')
          "
          alt=""
        />
        <div class="bt1-font">{{ getUserInfo.address | handleAddress }}</div>
        <van-icon
          color="#8992AE"
          name="arrow"
          size="12"
          style="margin-left: 2px"
        />
      </div>
      <img
        class="bt13"
        @click="changeLangEvent"
        :src="
          $i18n.locale == 'zh_CN'
            ? require('../assets/images/en.png')
            : require('../assets/images/zh.png')
        "
        alt=""
      />
      <img
        @click="$router.push('/notice')"
        class="bt14"
        src="../assets/images/information.png"
        alt=""
      />
      <div class="notice" v-show="+noticeNumber > 0"></div>
    </div>
    <div style="height: 14vw"></div>
    <van-swipe
      @change="onChange"
      :autoplay="3000"
      class="swiper"
      width="93vw"
      height="40vw"
    >
      <van-swipe-item v-for="(image, index) in bannerList" :key="index">
        <img @click="imgClick(index, image.gourl)" v-lazy="image.img" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ bannerIndex + 1 }}/{{ bannerList.length }}
        </div>
      </template>
    </van-swipe>
    <div class="gdbox">
      <img
        class="gdimg"
        src="../assets/images/gengduo.png"
        alt=""
        @click="goMore"
      />
      <van-notice-bar :scrollable="false" background="#090A1B" color="#fff">
        <!-- :left-icon="require('../assets/images/inform.png')" -->
        <van-swipe
          vertical
          :autoplay="3000"
          class="notice-swipe"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="(item, index) in noticeList"
            @click="goProblem(index, item.url)"
            :key="index"
            >{{ item.title }}</van-swipe-item
          >
        </van-swipe>
      </van-notice-bar>
    </div>
    <div class="mbac">
      <div class="mbox1">
        <div class="mbb">
          <div
            class="mbitem"
            v-for="(item, i) in hotList"
            :key="item.symbolId"
            @click="goKline(item)"
          >
            <div class="mbtop">
              <img class="mbimg" :src="item.logoImg" alt="" />
              <div class="mbfont">
                {{ item.symbolName }} <span>{{ $t("common.yongxu") }}</span>
              </div>
              <img class="mbrimg" src="../assets/images/right.png" alt="" />
            </div>
            <div
              class="mbfont2"
              :class="
                hotColorArr[i] == 'more'
                  ? 'green3'
                  : hotColorArr[i] == 'kong'
                  ? 'red3'
                  : 'baise'
              "
            >
              ${{ $formatMoney(item.lastPrice, 10) }}
            </div>
            <div class="mbfont3">
              <!-- <img
                :src="
                  +item.riseAndFallRange <= 0
                    ? require('../assets/images/drop.png')
                    : require('../assets/images/litre.png')
                "
                alt=""
              /> -->
              <div :class="+item.riseAndFallRange > 0 ? 'green3' : 'red3'">
                {{
                  +item.riseAndFallRange > 0
                    ? "+" + item.riseAndFallRange
                    : item.riseAndFallRange
                }}%
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mbox2">
        <div
          :class="active == 0 ? 'm2item m2active' : 'm2item'"
          @click="active = 0"
        >
          {{ $t("common.zhangfubang") }}
        </div>
        <div
          :class="active == 1 ? 'm2item m2active' : 'm2item'"
          @click="active = 1"
        >
          {{ $t("common.diefubang") }}
        </div>
        <div
          :class="active == 2 ? 'm2item m2active' : 'm2item'"
          @click="active = 2"
        >
          {{ $t("common.chengjiaozongbang") }}
        </div>
      </div>
      <div class="mbox3">
        <div
          class="mli"
          v-for="(item, i) in tokenList"
          :key="item.symbolId"
          @click="goKline(item)"
        >
          <SymbolItem :detail="item" :colorText="tokenColorArr[i]" />
        </div>
      </div>
    </div>
    <ModelReg ref="modelReg" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SymbolItem from "../components/symbol-item.vue";
import { createSocket } from "../common/_websocket";
import ModelReg from "../components/Model_Reg.vue";
import tp from "../assets/js/tp.js";
export default {
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  components: {
    SymbolItem,
    ModelReg,
  },
  data() {
    return {
      noticeNumber: 0,
      active: 0,
      contractWebSocket: createSocket(),
      bannerIndex: 0,
      bannerList: [],
      noticeList: [],
      hotList: [],
      tokenList: [],
      hotColorArr: [],
      tokenColorArr: [],
    };
  },
  destroyed() {
    this.contractWebSocket.close();
  },
  deactivated() {
    this.contractWebSocket.close();
  },
  mounted() {
    if (this.getUserInfo.access_token && !this.getUserInfo.email) {
      this.$refs.modelReg.isShow = true;
    }
  },
  async activated() {
    this.active = 0;
    this.socketContract();
    this.getNoticeNum();
    console.log(tp.isConnected());
    // let arr = await tp.getWalletList()
    // console.log(arr)
  },
  watch: {
    hotList(val, oldVal) {
      this.handlePriceColor(val, oldVal, "hot");
    },
    tokenList(val, oldVal) {
      this.handlePriceColor(val, oldVal, "token");
    },
    getUserInfo(val) {
      val && this.getInfo();
    },
    "$i18n.locale"() {
      this.getInfo();
    },
    active(val, oldval) {
      this.getRankList(val, oldval);
    },
  },
  filters: {
    handleAddress(val) {
      if (val) {
        let qian = val.slice(0, 4);
        let hou = val.slice(-4);
        return qian + "..." + hou;
      }
      return "";
    },
  },
  methods: {
    goProblem(ind, val) {
      if (val) {
        window.location.href = val + "?id=" + ind;
        return;
      }
      this.$router.push({
        path: "/inform",
        query: {
          id: ind,
        },
      });
    },
    async getNoticeNum() {
      const ret = await this.$http({
        url: "/wallet/notification/app/userToUnreadNumber",
        method: "get",
      });
      if (ret.data.code === 0) {
        this.noticeNumber = +ret.data.data;
      }
    },
    goOptions() {
      if (this.getUserInfo.address) {
        this.$router.push("/options");
      }
    },
    async changeLangEvent() {
      if (this.$i18n.locale == "zh_CN") {
        this.$i18n.locale = "en_US";
        // Locale.use("en-US", enUS);
        localStorage.setItem("lang", "en_US");
      } else {
        this.$i18n.locale = "zh_CN";
        // Locale.use("zh_CN", zhCN);
        localStorage.setItem("lang", "zh_CN");
      }
      //   this.initLang();
      //   // this.list2 = [
      //   //   this.$t("common.zhangfubang"),
      //   //   this.$t("common.diefubang"),
      //   //   this.$t("common.chengjiaozongbang"),
      //   // ];
      const ret = await this.$http({
        url: "/user/user/modifyingUserLanguage",
        method: "post",
        data: {
          uid: this.getUserInfo.uid,
          languageCode: this.$i18n.locale,
        },
      });
    },
    goKline({ symbolId, symbolName }) {
      this.$router.push({ path: "/kline", query: { symbolId, symbolName } });
    },
    handlePriceColor(val, oldVal, type) {
      try {
        if (type == "token") {
          val.forEach((v, i) => {
            if (+v.lastPrice > +oldVal[i].lastPrice) {
              this.tokenColorArr[i] = "more";
            } else if (+v.lastPrice < +oldVal[i].lastPrice) {
              this.tokenColorArr[i] = "kong";
            } else if (+v.lastPrice == +oldVal[i].lastPrice) {
              this.tokenColorArr[i] = "baise";
            }
          });
        } else {
          val.forEach((v, i) => {
            if (+v.lastPrice > +oldVal[i].lastPrice) {
              this.hotColorArr[i] = "more";
            } else if (+v.lastPrice < +oldVal[i].lastPrice) {
              this.hotColorArr[i] = "kong";
            } else if (+v.lastPrice == +oldVal[i].lastPrice) {
              this.hotColorArr[i] = "baise";
            }
          });
        }
      } catch (error) {
        //
      }
    },
    handleSumPrice(val) {
      if (+val >= 100000000) {
        let n = Math.floor((+val / 100000000) * 100) / 100;
        return n + this.$t("long.yi");
      } else if (+val >= 10000) {
        let n = Math.floor((+val / 10000) * 100) / 100;
        return n + this.$t("long.wan");
      } else {
        return +val;
      }
    },
    getRankList(val, oldval) {
      this.contractWebSocket.websocket.send(
        JSON.stringify({
          type: "unsubscribe", // 查询消息类型，固定值
          params: ["ranking", oldval + 1],
        })
      );
      this.contractWebSocket.websocket.send(
        JSON.stringify({
          type: "subscribe", // 查询消息类型，固定值
          params: ["ranking", val + 1],
        })
      );
    },
    socketContract() {
      this.contractWebSocket.init({
        url: `/contract/ws/info`,
        onopen: (msg, data) => {
          this.contractWebSocket.websocket.send(
            JSON.stringify({
              type: "subscribe", // 查询消息类型，固定值
              params: ["ranking", "1"],
            })
          );
          this.contractWebSocket.websocket.send(
            JSON.stringify({
              type: "subscribe", // 查询消息类型，固定值
              params: ["ranking", "4"],
            })
          );
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[1] == 4) {
            this.hotList = zdata.data.map((v) => {
              v.riseAndFallRange = (+v.riseAndFallRange).toFixed(2);
              return v;
            });
          } else {
            this.tokenList = zdata.data.map((v) => {
              v.sumPrice = this.handleSumPrice(v.sumPrice);
              v.riseAndFallRange = (+v.riseAndFallRange).toFixed(2);
              return v;
            });
          }
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
    async getInfo() {
      const ret = await this.$http({
        url: "/system/articleManagement/getArticleManagement",
        method: "post",
        data: {
          articleTypeCode: "1563385493535264459",
        },
      });
      if (ret.data.code === 0) {
        this.bannerList = ret.data.data.map((v) => {
          return {
            ...v,
            img: "https://rippleexchanges.oss-cn-chengdu.aliyuncs.com/" + v.image,
            gourl: v.url,
          };
        });
      }
      const ret1 = await this.$http({
        url: "/system/articleManagement/getArticleManagement",
        method: "post",
        data: {
          articleTypeCode: "1563385493535264457",
        },
      });
      if (ret1.data.code === 0) {
        this.noticeList = ret1.data.data;
      }
    },
    imgClick(ind, val) {
      if (val) {
        window.location.href = val + "?id=" + ind;
        return;
      }
    },
    goMore() {
      localStorage.setItem("zh", 0);
      this.$router.push("/problem");
    },
    onChange(index) {
      this.bannerIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background: #090a1b;
  overflow-x: hidden;
  //   min-height: 100vh;
  font-family: PingFangSC-regular;
}
.btop {
  width: 100%;
  height: 14vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: #090a1b;
  .b11 {
    font-size: 16px;
    font-weight: bolder;
    color: #fff;
    position: absolute;
    left: 3vw;
    top: 50%;
    transform: translateY(-50%);
  }
  .bt1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // width: 28vw;
    // background-color: #171A2B;
    height: 7vw;
    border-radius: 1.6vw;
    padding: 0 2vw;
    position: absolute;
    left: 16vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    .bt1-img {
      width: 3.4vw;
      margin-right: 4px;
    }
  }
  .bt12 {
    position: absolute;
    width: 18vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .bt13 {
    position: absolute;
    width: 6vw;
    right: 11vw;
    top: 50%;
    transform: translateY(-50%);
  }
  .bt14 {
    position: absolute;
    width: 6vw;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
  }
  .notice {
    width: 2vw;
    height: 2vw;
    background-color: rgba(228, 83, 96, 100);
    border-radius: 50%;
    position: absolute;
    right: 2.8vw;
    top: 2.8vw;
  }
}
.swiper {
  // padding: 0 1.8vw;
  width: 100vw;
  height: 40vw;
  overflow: hidden;
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  img {
    width: 100%;
    height: 100%;
    // border-radius: 1.33vw;
  }
}
.gdbox {
  position: relative;
  .gdimg {
    width: 5vw;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
  }
  .notice-swipe .van-swipe-item {
    font-size: 3vw;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 86vw;
    color:#e8f656;
  }
}
.mbac {
  background-color: #090a1b;
}
.mbox1 {
  width: 94vw;
  margin: 0 3vw;
  //   height: 24vw;
  padding: 0vw 0;
  // overflow-x: scroll;
  .mbb {
    display: flex;
    flex-wrap: wrap;
  }
  .mbitem {
    width: 45vw;
    height: 20vw;
    flex: 0 0 45vw;
    margin-right: 10px;
    background-color: #171a2b;
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
    &:nth-child(2n) {
      margin-right: 0;
    }
    .mbtop {
      display: flex;
      align-items: center;
      margin: 3.4vw 3vw 0;
      .mbimg {
        width: 3.8vw;
        height: 3.8vw;
        border-radius: 50%;
        margin-right: 2vw;
        position: relative;
        top: -1px;
      }
      .mbfont {
        font-size: 3.2vw;
        font-weight: 600;
        width: 32vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        span{
          color:#8992AE;
          font-size: 3vw;
          // font-weight: 500;
        }
      }
      .mbrimg {
        width: 4.2vw;
      }
    }
    .mbfont2 {
      position: absolute;
      left: 3vw;
      bottom: 3vw;
      font-size: 3.8vw;
      font-weight: 600;
    }
    .mbfont3 {
      position: absolute;
      right: 3vw;
      bottom: 3vw;
      font-size: 3vw;
      display: flex;
      font-weight: 600;
      align-items: center;
      img {
        width: 3.2vw;
        // margin-right: 1vw;
      }
    }
  }
}
.mbox2 {
  display: flex;
  height: 10vw;
  align-items: center;
  margin-left: 3vw;
  .m2item {
    padding: 1.2vw 4vw;
    font-size: 3.2vw;
    color: #8992ae;
  }
  .m2active {
    // background-color: #0a7aff;
    color: #fff;
    font-weight: 600;
    border-radius: 2px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 2.5px;
      border-radius: 3px;
      background: #fff;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.green2 {
  background-color: #00a77f;
}
.red2 {
  background-color: #e45360;
}
.green3 {
  color: #00a77f !important;
}
.red3 {
  color: #e45360 !important;
}
.baise {
  color: #fff !important;
}
.mbox3 {
  margin: 3vw 0 0;
}
</style>
